<template>
  <view class="bottle-content-modal" v-if="show" :class="{'modal-show': show}">
    <!-- 发光背景 -->
    <view class="modal-glow" :style="effectStyle"></view>
    
    <!-- 模糊背景 -->
    <view class="modal-backdrop" @tap.stop="onClose"></view>
    
    <!-- 内容容器 -->
    <view class="modal-container" :class="{'male-theme': bottleData.gender === 'male', 'female-theme': bottleData.gender === 'female'}" @tap.stop>
      <!-- 关闭按钮 -->
      <view class="close-btn" @tap="onClose">×</view>
      
      <!-- 魔法效果 -->
      <view class="modal-magic-effects">
        <view class="floating-star" v-for="i in 10" :key="i"></view>
        <view class="magic-light"></view>
      </view>
      
      <!-- 头部：漂流瓶与用户信息 -->
      <view class="modal-header">
        <!-- 用户信息 -->
        <view class="user-info">
          <view class="user-avatar-container">
            <image class="user-avatar" :src="bottleData.avatar || 'https://picsum.photos/seed/default/200'" mode="aspectFill"></image>
          </view>
          <view class="user-details">
            <view class="username-line">
              <text class="username">{{ bottleData.username || '神秘用户' }}</text>
              <view class="gender-icon" :class="{'male-icon': bottleData.gender === 'male', 'female-icon': bottleData.gender === 'female'}">
                {{ bottleData.gender === 'male' ? '♂' : '♀' }}
              </view>
              <text class="age" v-if="bottleData.age">{{ bottleData.age }}岁</text>
            </view>
            <view class="location-time">
              <text class="discovery-time">{{ formatRelativeTime(discoveryTime) }}</text>
              <text class="city" v-if="bottleData.city">{{ bottleData.city }}</text>
            </view>
            <view class="distance" v-if="bottleData.distance">{{ bottleData.distance }}</view>
          </view>
        </view>
      </view>
      
      <!-- 内容区域 -->
      <view class="modal-content">
        <view class="content-title">漂流瓶内容</view>
        <view class="content-text">{{ message || '这个漂流瓶中有一条神秘消息，等待你来解读...' }}</view>
      </view>
      
      <!-- 操作按钮区域 -->
      <view class="modal-actions">
        <view class="action-btn throw-btn" @tap="onThrow">
          <view class="btn-icon">🌊</view>
          <view class="btn-text">扔回海里</view>
        </view>
        <view class="action-btn reply-btn" @tap="onReply">
          <view class="btn-icon">💬</view>
          <view class="btn-text">回复</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "BottleContentModal",
  props: {
    // 控制弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 漂流瓶数据
    bottleData: {
      type: Object,
      default: () => ({
        id: '',
        avatar: '',
        gender: 'male',
        username: '神秘用户',
        age: '',
        city: '',
        distance: ''
      })
    },
    // 漂流瓶消息内容
    message: {
      type: String,
      default: ''
    },
    // 发现时间
    discoveryTime: {
      type: String,
      default: ''
    },
    // 特效样式
    effectStyle: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 关闭弹窗
    onClose() {
      this.$emit('close');
    },
    
    // 扔回海里
    onThrow() {
      this.$emit('throw');
    },
    
    // 回复漂流瓶
    onReply() {
      this.$emit('reply');
    },

    // 格式化相对时间
    formatRelativeTime(dateTimeStr) {
      if (!dateTimeStr) return '刚刚';
      
      try {
        // 将日期字符串转换为时间戳
        const timestamp = new Date(dateTimeStr).getTime();
        const now = new Date().getTime();
        const diff = now - timestamp; // 时间差（毫秒）
        
        // 定义时间间隔
        const minute = 60 * 1000; // 1分钟
        const hour = 60 * minute; // 1小时
        const day = 24 * hour; // 1天
        const week = 7 * day; // 1周
        const month = 30 * day; // 1个月（近似值）
        
        if (diff < 0) {
          return '刚刚';
        } else if (diff < minute) {
          return '刚刚';
        } else if (diff < hour) {
          const minutes = Math.floor(diff / minute);
          return `${minutes}分钟前`;
        } else if (diff < day) {
          const hours = Math.floor(diff / hour);
          return `${hours}小时前`;
        } else if (diff < week) {
          const days = Math.floor(diff / day);
          return `${days}天前`;
        } else if (diff < month) {
          const weeks = Math.floor(diff / week);
          return `${weeks}周前`;
        } else {
          const months = Math.floor(diff / month);
          return `${months}个月前`;
        }
      } catch (e) {
        console.error('日期格式化错误:', e);
        return dateTimeStr; // 出错时返回原始字符串
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 漂流瓶内容弹窗样式 */
.bottle-content-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  
  &.modal-show {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* 发光背景 */
  .modal-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
      var(--effect-color, #B3F73C) 0%,
      rgba(0, 0, 0, 0) 70%
    );
    opacity: 0.5;
    animation: pulse-slow 3s ease-in-out infinite alternate;
  }
  
  /* 模糊背景 */
  .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
  }
  
  /* 内容容器 */
  .modal-container {
    position: relative;
    width: 90%;
    max-width: 600rpx;
    max-height: 80vh;
    background: rgba(20, 20, 20, 0.85);
    border-radius: 30rpx;
    padding: 40rpx 30rpx;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modal-float 0.5s ease forwards;
    border: 2rpx solid var(--primary-color, #409EFF);
    display: flex;
    flex-direction: column;
    
    /* 男性主题 */
    &.male-theme {
      --theme-color: var(--primary-color, #409EFF);
      --theme-color-light: var(--secondary-color, #64BAFF);
      --theme-gradient: linear-gradient(135deg, #409EFF, #64BAFF);
    }
    
    /* 女性主题 */
    &.female-theme {
      --theme-color: var(--primary-color, #FF79A8);
      --theme-color-light: var(--secondary-color, #FFB6D2);
      --theme-gradient: linear-gradient(135deg, #FF79A8, #FFB6D2);
    }
    
    /* 魔法效果 */
    .modal-magic-effects {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      pointer-events: none;
    }
    
    .floating-star {
      position: absolute;
      width: 6rpx;
      height: 6rpx;
      background-color: var(--theme-color-light, #64BAFF);
      border-radius: 50%;
      box-shadow: 0 0 8rpx 2rpx var(--theme-color-light, #64BAFF);
      animation: float-star 6s ease-in-out infinite;
      
      &:nth-child(1) {
        left: 10%;
        top: 15%;
        width: 6rpx;
        height: 6rpx;
        animation-delay: 0.2s;
        animation-duration: 7s;
      }
      
      &:nth-child(2) {
        left: 25%;
        top: 45%;
        width: 8rpx;
        height: 8rpx;
        animation-delay: 1.5s;
        animation-duration: 9s;
      }
      
      &:nth-child(3) {
        left: 40%;
        top: 82%;
        width: 5rpx;
        height: 5rpx;
        animation-delay: 0.8s;
        animation-duration: 8s;
      }
      
      &:nth-child(4) {
        left: 65%;
        top: 30%;
        width: 7rpx;
        height: 7rpx;
        animation-delay: 0.3s;
        animation-duration: 12s;
      }
      
      &:nth-child(5) {
        left: 85%;
        top: 70%;
        width: 9rpx;
        height: 9rpx;
        animation-delay: 1.2s;
        animation-duration: 6s;
      }
      
      &:nth-child(6) {
        left: 50%;
        top: 50%;
        width: 10rpx;
        height: 10rpx;
        animation-delay: 0.7s;
        animation-duration: 10s;
      }
      
      &:nth-child(7) {
        left: 72%;
        top: 12%;
        width: 4rpx;
        height: 4rpx;
        animation-delay: 0.1s;
        animation-duration: 13s;
      }
      
      &:nth-child(8) {
        left: 33%;
        top: 92%;
        width: 7rpx;
        height: 7rpx;
        animation-delay: 2s;
        animation-duration: 7.5s;
      }
      
      &:nth-child(9) {
        left: 92%;
        top: 42%;
        width: 6rpx;
        height: 6rpx;
        animation-delay: 0.5s;
        animation-duration: 8.5s;
      }
      
      &:nth-child(10) {
        left: 15%;
        top: 60%;
        width: 8rpx;
        height: 8rpx;
        animation-delay: 1.8s;
        animation-duration: 9.2s;
      }
    }
    
    .magic-light {
      position: absolute;
      top: -100rpx;
      left: -100rpx;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        var(--theme-color-light, #64BAFF) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      opacity: 0.1;
      animation: magic-light-move 20s linear infinite;
    }
    
    /* 关闭按钮 */
    .close-btn {
      position: absolute;
      top: 15rpx;
      right: 15rpx;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background-color: rgba(50, 50, 50, 0.7);
      color: #FFFFFF;
      font-size: 40rpx;
      line-height: 45rpx;
      text-align: center;
      z-index: 5;
      
      &:active {
        transform: scale(0.95);
      }
    }
    
    /* 头部区域 */
    .modal-header {
      display: flex;
      margin-bottom: 30rpx;
      position: relative;
      
      /* 用户信息 */
      .user-info {
        flex: 1;
        display: flex;
        align-items: center;
        
        .user-avatar-container {
          position: relative;
          margin-right: 15rpx;
          
          .user-avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            border: 3rpx solid var(--theme-color, #409EFF);
            box-shadow: 0 0 15rpx 2rpx var(--theme-color-light, #64BAFF);
          }
        }
        
        .user-details {
          flex: 1;
          
          .username-line {
            display: flex;
            align-items: center;
            margin-bottom: 5rpx;
            flex-wrap: wrap;
            
            .username {
              font-size: 32rpx;
              color: #FFFFFF;
              font-weight: bold;
              text-shadow: 0 0 8rpx var(--theme-color, #409EFF);
              margin-right: 10rpx;
              max-width: 240rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 1.2;
            }
            
            .gender-icon {
              min-width: 30rpx;
              height: 30rpx;
              font-size: 20rpx;
              line-height: 30rpx;
              text-align: center;
              border-radius: 50%;
              border: 2rpx solid #FFFFFF;
              margin-right: 8rpx;
              flex-shrink: 0;
              
              &.male-icon {
                background-color: #409EFF;
                color: #FFFFFF;
              }
              
              &.female-icon {
                background-color: #FF79A8;
                color: #FFFFFF;
              }
            }
            
            .age {
              font-size: 22rpx;
              color: rgba(255, 255, 255, 0.7);
              flex-shrink: 0;
            }
          }
          
          .location-time {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            
            .discovery-time {
              margin-right: 10rpx;
            }
            
            .discovery-time:after {
              content: '·';
              margin-left: 10rpx;
              color: rgba(255, 255, 255, 0.5);
            }
          }
          
          .distance {
            font-size: 24rpx;
            color: var(--theme-color-light, #64BAFF);
          }
        }
      }
    }
    
    /* 内容区域 */
    .modal-content {
      flex: 1;
      background-color: rgba(50, 50, 50, 0.5);
      border-radius: 20rpx;
      padding: 20rpx;
      margin-bottom: 30rpx;
      max-height: 50vh;
      overflow-y: auto;
      
      .content-title {
        font-size: 28rpx;
        color: var(--theme-color-light, #64BAFF);
        margin-bottom: 15rpx;
        display: flex;
        align-items: center;
      }
      
      .content-title::before, .content-title::after {
        content: '';
        flex: 1;
        height: 1rpx;
        background-color: var(--theme-color-light, #64BAFF);
        margin: 0 15rpx;
      }
      
      .content-title::before {
        background: linear-gradient(to right, transparent, var(--theme-color-light, #64BAFF));
      }
      
      .content-title::after {
        background: linear-gradient(to left, transparent, var(--theme-color-light, #64BAFF));
      }
      
      .content-text {
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 1.6;
        margin-bottom: 0;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
    
    /* 操作按钮区域 */
    .modal-actions {
      display: flex;
      justify-content: space-around;
      
      .action-btn {
        width: 45%;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition: all 0.2s;
        
        .btn-icon {
          font-size: 36rpx;
          margin-right: 10rpx;
        }
        
        .btn-text {
          font-size: 30rpx;
        }
        
        &:active {
          transform: scale(0.95);
        }
      }
      
      /* 扔按钮 */
      .throw-btn {
        background-color: rgba(100, 100, 100, 0.8);
        color: #FFFFFF;
        border: 2rpx solid rgba(255, 255, 255, 0.3);
        
        &:active {
          background-color: rgba(120, 120, 120, 0.8);
        }
      }
      
      /* 回复按钮 */
      .reply-btn {
        background: var(--theme-gradient, linear-gradient(135deg, #409EFF, #64BAFF));
        color: #FFFFFF;
        box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3);
        
        &:active {
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}

/* 弹窗动画 */
@keyframes modal-float {
  0% {
    opacity: 0;
    transform: translateY(50rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 漂浮效果慢脉冲 */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* 星星漂浮 */
@keyframes float-star {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-15rpx) translateX(5rpx);
    opacity: 0.8;
  }
  50% {
    transform: translateY(0) translateX(10rpx);
    opacity: 0.5;
  }
  75% {
    transform: translateY(15rpx) translateX(5rpx);
    opacity: 0.8;
  }
}

/* 魔法光点移动 */
@keyframes magic-light-move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(80%, 20%);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(20%, 80%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 迷你瓶子漂浮 */
@keyframes mini-bottle-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5rpx) rotate(5deg);
  }
}

/* 闪烁动画 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
    box-shadow: 0 0 2rpx 0rpx rgba(255, 255, 255, 0.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 5rpx 2rpx rgba(255, 255, 255, 0.6);
  }
}
</style> 